<template>
  <div class="history-container">
    <van-cell-group>
      <van-cell title="搜索历史">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <div v-if='delFlag'>
            <span @click='delAll' >全部删除  </span>
            <span @click="delFlag=false">完成</span>
          </div>
          <!-- 删除图标 -->
          <van-icon  @click="delFlag=true" v-else name="delete" />
        </template>
      </van-cell>
      <van-cell @click="delcell(index)" v-for="(item,index) in  historyData" :key="index" :title="item" >
        <!-- 删除图标 -->
          <van-icon v-if="delFlag"  slot='right-icon'   name="cross" />
      </van-cell>

    </van-cell-group>
  </div>
</template>

<script>
export default {
  data(){
    return {
      delFlag:false
    }
  },
  props:{
    historyData:{
      type:Array
    }
  },
  name: "",
  methods:{
    // 清除所有的缓存记录
    delAll(){
      /* 
      + 清空列表
      + 清空本地缓存
      */
     this.$emit('delhistory')
    },

    // 删除单个
    delcell(index){
    /* 
    如果 delFlag  ==true   就删除
    如果 delFlag==false   就显示搜索结果
    
    */
        
      this.$emit('delcell',index,this.delFlag)
    }
  }
};
</script>
<style lang="less" scoped></style>
